<template>
  <div>
      <Form ref= 'uploadForm' :model="form" :label-width="80">
        <FormItem label="系统标题">
          <Input v-model="form.logoTxt" placeholder="请输入logo标题"></Input>
        </FormItem>
        <FormItem label="系统图标">
          <div class="demo-upload-list" v-for="item in uploadList">
            <template v-if="item.status === 'finished'">
              <img :src="item.preUrl">
              <div class="demo-upload-list-cover">
                <!--<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>-->
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload ref="upload"
            :before-upload="handleBeforeUpload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :on-error="uploadError"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-format-error="handleFormatError"
            :data="{noValidateType:0}"
            name='upload'
            :action="uploadUrl"
                  style="display: inline-block;width:58px;">
         <!--<Button type="ghost" class="upload-btn" title="上传图标">上传</Button>-->
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-cloud-upload" size="30" color="#3399ff"></Icon>
              <p style="margin-top: -40px">点击上传</p>
            </div>
       </Upload>
          <!--<Modal title="View Image" v-model="visible">
            <img :src="previewUrl" v-if="visible && previewUrl!='' && previewUrl!=undefined" style="width: 100%">
          </Modal>-->
        </FormItem>
        <div class="btnFooter">
          <Button type="default" @click="cancle">取消</Button>
          <Button type="primary" style="margin-left: 10px;"  @click="handleUploadSubmit">确定</Button>
        </div>
      </Form>
  </div>
</template>

<script>
  import urlSource from '../../api/urlSource'
  import Bus from '../../bus/bus'

  export default {
    name: "logo",
    components: {},
    props:{
      logoStatus:{}
    },
    data() {
      return {
        uploadUrl: urlSource.apiUrl + "file/upload",
        // uploadUrl:"",
        previewUrl: '',
        visible: false,
        uploadList: [],
        form: {
          id: '',
          userId: '',
          orgId: '',
          logoUrl: '',
          logoTxt: '',
          createTime: '',
        }
      }
    },
    methods: {
      cancle() {
        this.$emit('cancleUploadModal','');
      },
      //添加logo
      handleUploadSubmit() {
        let url = '';
        if(!this.form.id){
          url = urlSource.apiUrl + "orgLogo/addOrgLogo";
        }else{
          url = urlSource.apiUrl + "orgLogo/updateOrgLogo";
          this.form.createTime = new Date(this.form.createTime);
        }

        if(!this.form.logoTxt){
          this.$Message.warning("请填写标题!")
          return;
        }
        if(!this.uploadList.length>0 || !this.uploadList[0].url){
          this.$Message.warning("请上传图标!")
          return;
        }else{
          this.form.logoUrl = this.uploadList[0].url;
        }

        this.form.userId = this.$store.state.user.userId;
        this.form.orgId = this.$store.state.user.orgId;
        console.log(this.form)
        this.$http.post(url, this.form).then(res => {
          if (res.data) {
            this.$Message.success("保存成功!")
            this.$emit('cancleUploadModal','');
            this.$store.commit('setLogoTxt',this.form.logoTxt)
            localStorage.setItem("setLogoTxt", this.form.logoTxt)
            this.$store.commit('setLogoUrl',this.form.logoUrl)
            localStorage.setItem("setLogoUrl", this.form.logoUrl)
            Bus.$emit('logoUrlChg',true)
          } else {
            this.$Message.error("保存失败!")
          }
        }).catch(err => {
          this.$Message.error("保存失败!")
        })
      },
      handleBeforeUpload () {
        console.log(this.$refs.upload)
        const check = this.uploadList.length < 2;
        if (!check) {
          this.$Notice.warning({
            title: '只能上传一张图标.'
          });
        }
        return check;
      },
      handleSuccess (res, file) {
        // console.log(res)
        // console.log(file)
        let orgId = this.$store.state.user.orgId;
        let userId = this.$store.state.user.userId;
        file.url = res.msg;
        console.log(file.url)
        file.preUrl = urlSource.uploadShowUrl + '?fileUrl='+ file.url + '&uuid='+new Date().getTime();;
        this.uploadList = [];
        this.uploadList.push(file);
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '格式错误',
          desc: '文件' + file.name + '格式错误,请选择格式为jpg或png图标'
        });
      },
      uploadError(error, file) { //上传失败
        this.$Notice.warning({
          title: '上传失败',
          desc: error
        });
      },
      handleView (item) {
        this.previewUrl = this.preUrl;
        this.visible = true;
      },
      handleRemove (file) {
        console.log(file)
        this.uploadList.splice(this.uploadList.indexOf(file),1);
        //调用服务端进行图片删除

      },
      //获取当前企业logo 信息
      getOrgLogo(orgId,userId){
        let url = urlSource.apiUrl + 'orgLogo/getOrgLogo/' + orgId + '/' + userId;
        this.$http.get(url).then(res => {
          console.log(res.data)
          if (res.data) {
            this.form = res.data
            let file = {};
            file.url = res.data.logoUrl;
            file.preUrl = res.data.displayLogoUrl + '?uuid='+new Date().getTime();
            file.status = 'finished';
            this.uploadList.push(file)
          }
        }).catch(err => {

        })
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getOrgLogo(this.$store.state.user.orgId,this.$store.state.user.userId)
      })
    }
  }
</script>

<style lang="less">
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .ivu-upload-select {
    background: #fff;
    border: 1px dashed #dddee1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;
  }
  .ivu-upload-select:hover {
    border: 1px dashed #2d8cf0;
  }
  .btnFooter{
    border-top: 1px solid #e9eaec;
    padding: 12px 18px 12px 18px;
    text-align: right;
  }
</style>
